<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <title>启动页</title>
    <meta charset="utf-8" />
    <link
      rel="Shortcut Icon"
      type="image/x-icon"
      href="https://www.bing.com/favicon.ico"
    />
    <meta
      http-equiv="Window-target"
      content="_top"
    />
    <meta
      http-equiv="Cache-Control"
      content="no-cache, no-store, must-revalidate"
    />
    <meta
      http-equiv="Pragma"
      content="no-cache"
    />
    <meta
      http-equiv="Expires"
      content="0"
    />
    <meta
      name="theme-color"
      content="#6699ff"
    />
    <link
      rel="apple-touch-icon-precomposed"
      href="favicon.ico"
    />
    <meta
      name="apple-mobile-web-app-title"
      content="启动页"
    />
    <meta
      name="apple-mobile-web-app-capable"
      content="yes"
    />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, user-scalable=no"
    />
  </head>

  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      text-align: center;
      background-color: #ffffff;
      cursor: url('https://ryzenx.oss-accelerate.aliyuncs.com/cur/Diamond_Sword.cur'), auto;
      font-family: 'menlo', 'Monaco', 'Cascadia Mono', 'JetBrains Mono', 'Fira Code', 'Ubuntu Mono',
        'Courier New', 'Courier', monospace;
    }

    input {
      cursor: url('https://ryzenx.oss-accelerate.aliyuncs.com/cur/Bow.cur'), auto;
    }

    img.smaller {
      width: 192px;
      height: 108px;
      max-width: 250px;
      animation: flipInX 4s;
      -webkit-animation: flipInX 4s;
    }

    .logo {
      font-size: 3em;
      white-space: normal;
      word-wrap: break-word;
      text-decoration: none;
      color: #232323;
      cursor: url('https://ryzenx.oss-accelerate.aliyuncs.com/cur/Redstonelink.cur'), auto;
    }

    #search_input_bd {
      width: 90%;
      height: 40px;
      background-color: transparent;
      border: none;
      outline: 0;
      font-size: 15px;
      color: #ee0000;
      padding: 0 20px;
      border-radius: 50px;
    }

    #search_input_go {
      width: 90%;
      height: 40px;
      background-color: transparent;
      border: none;
      outline: 0;
      font-size: 15px;
      color: #0000ee;
      padding: 0 20px;
      border-radius: 50px;
    }

    .search_part {
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: 4px;
      text-shadow: 0 2px 0px red, 0 4px 0 blue, 0 6px 0 yellow, 0 8px 0 green, 0 10px 0 white;
      margin-bottom: 30px;
      margin-top: 20px;
    }

    span {
      display: block;
      overflow: hidden;
      padding-left: 5px;
    }

    .search_bar {
      box-shadow: 0 0 18px rgba(70, 70, 40, 0.1);
      -webkit-animation: fadeIn 2.5s;
      animation: fadeIn 2.5s;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 20px;
      display: table;
      vertical-align: middle;
      width: 80%;
      height: 40px;
      max-width: 400px;
      margin: 10px auto;
    }

    #search_submit_bd {
      outline: 0;
      height: 40px;
      float: right;
      color: #0000ff;
      font-size: 18px;
      font-weight: 700;
      border: none;
      background-color: transparent;
      padding: 0 13px 0 13px;
    }

    #search_submit_go {
      outline: 0;
      height: 40px;
      float: right;
      color: #ff0000;
      font-size: 18px;
      font-weight: 700;
      border: none;
      background-color: transparent;
      padding: 0 13px 0 13px;
    }

    #content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
    }

    .box {
      -webkit-animation: fadeInDown 1s;
      animation: fadeInDown 1s;
      position: relative;
      display: inline-block;
      width: 80px;
      border: 0;
      margin-left: auto;
      margin-right: auto;
    }

    .box a {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      cursor: url('https://ryzenx.oss-accelerate.aliyuncs.com/cur/Redstonelink.cur'), auto;
    }

    .url {
      color: #ffff00;
      text-shadow: 1px 1px 5px #111;
      height: 1.5em;
      line-height: 1.5em;
      width: 100%;
      font-size: 0.8em;
      white-space: nowrap;
      overflow: hidden;
      margin: auto;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      -ms-text-overflow: ellipsis;
      margin-left: auto;
      margin-right: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }

    .icon {
      width: 3em;
      height: 3em;
      border-radius: 15%;
      box-shadow: 1px 1px 4px #aaa;
      background-color: #fff;
      max-width: 75px;
      padding: 2px;
    }

    .GMSICU {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .GMSICU .top {
      background-image: url('https://ryzenx.oss-accelerate.aliyuncs.com/img/bg.png');
      overflow: auto;
      background-repeat: repeat;
      background-size: cover;
      color: #000;
      text-shadow: 1px 1px 10px #eee;
      font-size: 40px;
      font-size: 4vw;
      text-decoration: none;
      border-radius: 20px;
      border-radius: 1vw;
      padding: 10px;
      padding: 0.5vw;
    }

    .redirectTime {
      width: fit-content;
      height: fit-content;
      background-image: url('https://ryzenx.oss-accelerate.aliyuncs.com/img/bg.png');
      overflow: auto;
      background-repeat: repeat;
      background-size: cover;
      color: #111;
      text-shadow: 0px 0px 5px #fff;
      font-size: 1.5rem;
      border-radius: 1vw;
      padding: 0.5vw;
    }

    @-webkit-keyframes flipInX {
      0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
      }

      70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
      }

      100% {
        -webkit-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1;
      }
    }

    @keyframes flipInX {
      0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
      }

      40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
        -ms-transform: perspective(400px) rotateX(-10deg);
        transform: perspective(400px) rotateX(-10deg);
      }

      70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        transform: perspective(400px) rotateX(10deg);
      }

      100% {
        -webkit-transform: perspective(400px) rotateX(0);
        -ms-transform: perspective(400px) rotateX(0);
        transform: perspective(400px) rotateX(0);
        opacity: 1;
      }
    }

    @-webkit-keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes fadeIn {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    @-webkit-keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);
      }

      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
      }
    }

    @keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);
      }

      100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
    }
  </style>
  <style type="text/css">
    .cover {
      position: relative;
      padding: 0;
      text-align: center;
    }

    @media only screen and (max-width: 1080px) {
      .cover {
        margin-bottom: 0;
        height: 100%;
      }

      #content {
        width: 100%;
        margin-top: 5rem;
      }
    }

    .cover-frame {
      position: relative;
      min-width: 100%;
      height: 100vh;
    }

    .cover-frame .bg-box {
      width: 100%;
      height: 100%;
    }

    .cover-frame .bg-box > img {
      display: block;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      object-position: center center;
    }

    #textarea {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: -10;
    }

    .footer {
      position: fixed;
      bottom: 8px;
      left: 50%;
      width: 120px;
      transform: translate(-60px, 0);
      font-weight: 300;
      font-size: 8px;
      color: white;
    }

    .footer :link {
      color: inherit;
      text-decoration: none;
    }
  </style>

  <body>
    <section class="cover">
      <div class="cover-frame">
        <div class="bg-box">
          <img
            src="https://unsplash.it/1920/1080?random"
            alt="Loading...Background Image"
          />
        </div>
      </div>
      <div id="content">
        <div class="search_part">
          <a
            class="logo"
            href="https://www.google.com"
          >
            <img
              class="smaller"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/GoogleLogo.gif"
            />
          </a>
          <div class="search_part">
            <h1>启动页</h1>
          </div>
          <div class="search_bar">
            <input
              type="submit"
              id="search_submit_bd"
              value="Baidu"
              onclick="search1()"
            />
            <span
              ><input
                class="search"
                type="text"
                value=""
                autocomplete="off"
                id="search_input_bd"
                onkeyup="if(event.keyCode==13){search1()}"
            /></span>
          </div>
          <div class="search_bar">
            <input
              type="submit"
              id="search_submit_go"
              value="Google"
              onclick="search2()"
            />
            <span
              ><input
                class="search"
                type="text"
                value=""
                autocomplete="off"
                id="search_input_go"
                onkeyup="if(event.keyCode==13){search2()}"
            /></span>
          </div>
        </div>
        <div class="GMSICU">
          <div class="redirectTime">
            <p id="nowTime"></p>
            <p id="redirectTime"></p>
            <input
              id="btn_copy"
              type="button"
              onclick="toClipboard()"
              value="Copy"
            />
            <textarea id="textarea"></textarea>
          </div>
        </div>
        <br />

        <div class="box">
          <a href="https://www.google.com"></a>
          <p>
            <img
              class="icon"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/Google.png"
            />
          </p>
          <p class="url">Google</p>
        </div>

        <div class="box">
          <a href="https://www.youtube.com"></a>
          <p>
            <img
              class="icon"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/youtube.png"
            />
          </p>
          <p class="url">Youtube</p>
        </div>

        <div class="box">
          <a href="http://www.bilibili.com"></a>
          <p>
            <img
              class="icon"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/bilibili.png"
            />
          </p>
          <p class="url">哔哩哔哩</p>
        </div>

        <div class="box">
          <a href="https://translate.google.com"></a>
          <p>
            <img
              class="icon"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/Translate.png"
            />
          </p>
          <p class="url">翻译</p>
        </div>

        <div class="box">
          <a href="https://mail.google.com"></a>
          <p>
            <img
              class="icon"
              src="https://ryzenx.oss-accelerate.aliyuncs.com/img/Gmail.png"
            />
          </p>
          <p class="url">Gmail</p>
        </div>

        <div class="box">
          <a href="https://mail.qq.com"></a>
          <p>
            <img
              class="icon"
              src="https://mail.qq.com/favicon.ico"
            />
          </p>
          <p class="url">QQ 邮箱</p>
        </div>

        <div class="box">
          <a href="https://outlook.live.com"></a>
          <p>
            <img
              class="icon"
              src="https://outlook.live.com/favicon.ico"
            />
          </p>
          <p class="url">Outlook</p>
        </div>

        <div class="box">
          <a href="https://mail.163.com"></a>
          <p>
            <img
              class="icon"
              src="https://mail.163.com/favicon.ico"
            />
          </p>
          <p class="url">163 邮箱</p>
        </div>
      </div>
      <div class="footer"></div>
    </section>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="index.js"></script>
    <script src="./static/click.js"></script>
    <script>
      nowTime();
      loadICP();
      window.onload = function () {
        var pageUrl = new URL(window.location.href);
        var host = pageUrl.origin;
        console.log('onLoad.');
        console.log(
          '%c' + '地址: ' + pageUrl,
          'color:blue;background-color:white;font-size:1.2rem;text-decoration:none;'
        );
        // startTimer();
        // clock();
      };

      function search1() {
        var value = document.getElementById('search_input_bd').value;
        if (value.length > 0) {
          window.location.href = 'https://www.baidu.com/s?word=' + value;
          document.getElementById('search_input_bd').value = '';
        }
      }

      function search2() {
        var value = document.getElementById('search_input_go').value;
        if (value.length > 0) {
          window.location.href = 'https://www.google.com/search?q=' + value;
          document.getElementById('search_input_go').value = '';
        }
      }
    </script>
  </body>
</html>
